<template>
  <div>
    <div class="vip">
      <div class="vipmember">
        <p>会员中心</p>
        <div class="vipname">
          <div>
            <h1>HI,带佬</h1>
            <h2>千万专属曲库等你随心听</h2>
          </div>
          <div class="vipopen">
            <p>立即开通</p>
          </div>
        </div>
        <div class="privilege">
          <div>
            <p>黑胶特权</p>
            <p>20</p>
            <p class="iconfont icon-xiangyou1"></p>
          </div>
          <div>
            <p>成长值</p>
            <p class="iconfont icon-xiangyou1"></p>
          </div>
          <div>
            <p>卡券包</p>
            <p class="iconfont icon-xiangyou1"></p>
          </div>
        </div>
      </div>

      <div></div>
    </div>
    <div class="vipdetails"></div>
   
  </div>
</template>
<script>

</script>
<style lang="less">
.vip {
  width: 100%;
  height: 100vh;
  .vipmember {
    width: 100%;
    height: 30vh;
    background-image: linear-gradient(90deg, rgb(0, 0, 0), #353535);
    p {
      font-size: 20px;
      padding-top: 2%;
      color: white;
      text-align: center;
      font-weight: bold;
    }
    .vipname {
      width: 80%;
      margin: 0 auto;
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        h1 {
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
        }
        h2 {
          font-size: 14px;
          color: #908283;
        }
      }
      .vipopen {
        background-color: #e3c2bb;
        border-radius: 20px;
        padding: 5px 15px;
        p {
          font-size: 14px;
          color: #000;
          font-weight: 500;
        }
      }
    }
    .privilege {
      width: 80%;
      margin: 5% auto 0 auto;
      display: flex;
      justify-content: space-around;
      div {
        line-height: 20px;
        flex: 1;
        color: #9a9490;
        display: flex;
        justify-content: center;
        &:nth-child(1) {
          p {
            &:nth-child(2) {
              font-size: 18px;
              font-weight: 600;
            }
          }
        }
        p {
          padding: 0;
          font-size: 12px;
          margin: 0 2px;
          font-size: 400;
        }
      }
    }
  }

}
</style>